<div class="page">
   <div class="clear"></div>
</div>
<form name="pageForm">
 <input type="hidden" name="pageNum" value="${pager.pageNum}"/>
 <input type="hidden" name="numPerPage" value="${pager.numPerPage}"/> 
</form>
<script type="text/javascript">
$(function() {
	$(".page").pager({
		pagenumber: ${pager.pageNum},
		pagecount: ${pager.pageCount},
		pagesize:${pager.numPerPage},
		buttonClickCallback: function(num){
		    var $pageSize=$("select[name='numPerPage']").find("option:selected").val();
			var $form=$("form[name='pageForm']");
			var $url=window.location.href;
			$form.attr("action",$url);
			$form.find("input[name='pageNum']").val(num);
			$form.find("input[name='numPerPage']").val($pageSize);
			$form.submit();
		}
	});
	$("select[name='numPerPage']").change(function(){
	     var $this=$(this);
	     var $pageSize=$this.find("option:selected").val();
	     var $form=$("form[name='pageForm']");
	     var $url=window.location.href;
		 $form.attr("action",$url);
	     $form.find("input[name='numPerPage']").val($pageSize);
	     $form.submit(); 
	});
});
</script>